<template>
  <div class='dashboard-container'>
    <div class="app-container">
      <el-card shadow="never">
        <el-form :label-position="labelPosition" label-width="95px" :model="requestParameters" ref="requestParameters">
          <div class="question-container">
            <el-row>
              <!-- 新增试题按钮 -->
              <el-col :span="24">
                   <el-button class="add-btn" @click="changeQuestion('add')" size="small" type="success" icon="el-icon-edit">新增试题</el-button>
              </el-col>
            </el-row>
            <!-- 第一行 -->
            <el-row>
              <el-col :span="6">
                <el-form-item label="学科" :data="subjectsList" prop="subjecID">
                  <el-select @change="changeSubject" v-model="requestParameters.subjectID" placeholder="请选择" @keyup.enter="searchQuestion">
                    <el-option
                      v-for="item in subjectsList"
                      :value="item.value"
                      :label="item.label"
                      :key="item.value"
                      >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="二级目录" prop="directorysList">
                  <el-select v-model="requestParameters.directorysList" placeholder="请选择" @keyup.enter="searchQuestion">
                    <el-option
                      v-for="item in directorysList"
                      :label="item.label"
                      :value="item.value"
                      :key="item.value"
                      >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="标签" prop="tagsList">
                  <el-select v-model="requestParameters.tagsList" placeholder="请选择" @keyup.enter="searchQuestion">
                    <el-option
                      v-for="item in tagsList"
                      :label="item.label"
                      :value="item.value"
                      :key="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="关键字" prop="keyword">
                  <el-input v-model="requestParameters.keyword" placeholder="请输入" @keyup.enter="searchQuestion"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 第二行 -->
            <el-row>
              <el-col :span="6">
                <el-form-item label="试题类型" prop="questionType">
                  <el-select v-model="requestParameters.questionType" placeholder="请选择" @keyup.enter="searchQuestion">
                    <el-option
                      v-for="item in questionType"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                      >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="难度" prop="difficulty">
                  <el-select v-model="requestParameters.difficulty" placeholder="请选择" @keyup.enter="searchQuestion">
                    <el-option
                      v-for="item in difficulty"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                      >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="方向" prop="direction">
                  <el-select v-model="requestParameters.direction" placeholder="请选择" @keyup.enter="searchQuestion">
                    <el-option
                      v-for="(item,index) in direction"
                      :key="index"
                      :value="index"
                      :label="direction[index]"
                      >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="录入人" prop="creatorList">
                  <el-select  v-model="requestParameters.creatorList" placeholder="请选择" @keyup.enter="searchQuestion">
                    <el-option
                      v-for="item in creatorList"
                      :key="item.id"
                      :value="item.id"
                      :label="item.username"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 第三行 -->
            <el-row>
              <el-col :span="6">
                <el-form-item label="题目备注" prop="remarks">
                  <el-input width="100%" v-model="requestParameters.remarks" placeholder="请输入" @keyup.enter="searchQuestion"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="企业简称" prop="shortName">
                   <el-input v-model="requestParameters.shortName" placeholder="请输入" @keyup.enter="searchQuestion"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="城市">
                <el-row :gutter="0">
                  <el-col :span="12" >
                    <el-form-item prop="province">
                      <el-select v-model="requestParameters.province" @change="handleProvince" placeholder="请选择" @keyup.enter="searchQuestion">
                        <el-option
                          v-for="item in citySelect.province"
                          :key="item"
                          :label="item"
                          :value="item"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item prop="city">
                      <el-select v-model="requestParameters.city" placeholder="请选择" @keyup.enter="searchQuestion">
                        <el-option
                          v-for="item in citySelect.cityDate"
                          :key="item"
                          :label="item"
                          :value="item"
                          ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                </el-form-item>
              </el-col>
              <!-- 清除搜索按钮 -->
              <el-col :span="6">
                <el-form-item>
                    <el-button type="primary" style="float:right;" size="mini" @click="searchQuestion">搜索</el-button>
                    <el-button size="mini" style="float:right;margin-right:5px" @click="cleanAll">清除</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-form>
        <!-- 数据记录 -->
        <el-alert
          v-if="alertText !== ''"
          :title="alertText"
          type="info"
          class="questions-alert"
          :closable="false"
          show-icon
        ></el-alert>
        <!-- end -->
        <!-- 数据列表 -->
        <el-table
          class="questions-table"
          :data="dataList"
          style="width: 100%">
          <el-table-column label="试题编号" width="120px">
            <template slot-scope="scope">
              <span>{{scope.row.number}}</span>
            </template>
          </el-table-column>
          <el-table-column label="学科" prop="subjects" width="70px">
            <template slot-scope="scope">
              <span>{{scope.row.subject}}</span>
            </template>
          </el-table-column>
          <el-table-column label="目录" prop="catalogID" width="80px">
            <template slot-scope="scope">
              <span>{{scope.row.catalog}}</span>
            </template>
          </el-table-column>
          <el-table-column label="题型" prop="questionType" width="70px">
            <template slot-scope="scope">
              <span v-if="scope.row.questionType == 1">单选</span>
              <span v-if="scope.row.questionType == 2">多选</span>
              <span v-if="scope.row.questionType == 3">简答</span>
            </template>
          </el-table-column>
          <el-table-column label="题干">
            <template slot-scope="scope">
              <span v-html="scope.row.question">{{scope.row.question}}</span>
            </template>
          </el-table-column>
          <el-table-column label="录入时间">
            <template slot-scope="scope">
              <span>{{scope.row.addDate | parseTimeByString()}}</span>
            </template>
          </el-table-column>
          <el-table-column label="难度" width="70px">
            <template slot-scope="scope">
              <span v-if="scope.row.difficulty==1">简单</span>
              <span v-if="scope.row.difficulty==2">一般</span>
              <span v-if="scope.row.difficulty==3">困难</span>
            </template>
          </el-table-column>
          <el-table-column label="录入人" width="100px">
            <template slot-scope="scope">
              <span>{{scope.row.creator}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button @click="checkQuestion(scope.row)" type="primary" icon="el-icon-view" circle plain size="mini" title="预览题型"></el-button>
                <el-button @click="changeQuestion(scope.row.id)" type="success" icon="el-icon-edit" circle plain size="mini" title="编辑问题"></el-button>
                <el-button @click="removeQuestion(scope.row.id)" type="danger" icon="el-icon-delete" circle plain size="mini" title="删除问题"></el-button>
                <el-button @click="addChoice(scope.row.id)" type="warning" icon="el-icon-check" circle plain size="mini" title="加入精选"></el-button>
            </template>
          </el-table-column>
          </el-table>
        <!-- end -->
        <!-- 分页 -->
        <el-pagination
          class="questions-pagination"
          background
          layout="prev, pager, next,sizes,jumper"
          :total="Number(total)"
          :current-page="Number(requestParameters.page)"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          :page-size="Number(requestParameters.pagesize)"
          :page-sizes="[5,10,20,30]"
          >
        </el-pagination>
        <!-- end -->
        <!-- 预览题目弹层 -->
        <Dialog  ref="questionsCheck" title="题目预览" :formBase="formData"></Dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
// 导入学科数据列表
import {list as subjectsData} from '@/api/hmmm/subjects'
// 导入学科下拉框列表
import { simple } from '@/api/hmmm/subjects'
// 导入目录列表
import { simple as directorysSimple } from '@/api/hmmm/directorys'
// 导入标签列表
import { simple as tagsSimple} from '@/api/hmmm/tags'
// 导入录入人列表
import { simple as creatorSimple } from '@/api/base/users'
// 导入时间过滤器
import { parseTimeByString } from '@/filters/index.js'
import { difficulty,direction,questionType } from '@/api/hmmm/constants'
import { list,detail,add,update,remove,choiceAdd } from '@/api/hmmm/questions'
import { provinces, citys } from '@/api/hmmm/citys.js'
// 导入试题预览组件
import Dialog from './../components/questions-check'
export default {
  name: 'QuestionsList',
   components: {
    Dialog
  },
  // 时间过滤器
  filters:{
    // 格式化时间
    parseTimeByString
  },
  data(){
    return {
      labelPosition:'right',
      // 数据列表
      dataList: [],
      // 学科列表
      subjectsList: [],
      // 二级目录列表
      directorysList: [],
      // 标签列表
      tagsList: [],
      // 录入人列表
      creatorList: [],
      // 总数据文字
      alertText:'',
      // 总数据
      total: '',
      // 页码
      requestParameters: {
        page: 1,
        pagesize: 5,
      },
      formData: {
        // 试题编号
        number: '',
        // 学科
        subjectID: '',
        // 目录
        catalogID: '',
        // 题型
        questionType: '',
        // 题干
        question: '',
        // 录入时间
        addDate: '',
        // 难度
        difficulty: '',
        // 录入人
        creator: '',
        // 标签
        tags: '',
        // 关键字
        keywors: '',
        // 方向
        direction: '',
        // 题目备注
        remarks: '',
        // 企业简称
        shortName: '',
        // 编号
        id:'',
        // 答案视频
        videoURL: '',
        // 答案解析
        answerID: '',
      },
      // 城市选择
      citySelect: {
        province: [],
        cityDate: []
      }
    }
  },
  computed: {
    // 题型
    questionType () {
      return questionType
    },
    // 难度
    difficulty () {
      return difficulty
    },
    // 方向
    direction () {
      return direction
    },
  },
  // 挂载结束
  mounted:function(){},
  // 创建完毕状态
  created () {
     var _this = this
    this.initialDate()
    this.getCityData()
    this.getSubjectsList()
    this.getCreatorList()
    // 键盘操作
    document.onkeydown = function (e) {
      var key = window.event.keyCode
      if(key === 13){
        _this.searchQuestion(this.requestParameters)
      }
    }
  },
  methods: {
    // 初始数据
    initialDate () {
      // 读取数据
      this.getList()
    },
    // 获取列表数据
    async getList (params) {
      const { data: res } = await list(this.requestParameters)
      // 获取数据给dataList
      this.dataList = res.items
      // 获取总条数
      this.total = res.counts
      this.alertText = `数据一共 ${this.total} 条记录`
    },
    // 选择学科
    changeSubject(subjectID) {
      this.subjectID = subjectID
      console.log(this.subjectID)
      this.getDirectoryList(subjectID)
      this.getTagsList(subjectID)
    },
    // 获取学科下拉框数据
    async getSubjectsList () {
      const {data} = await simple(this.subjectName);
      // 获取数据给subjectsList
      this.subjectsList = data;
    },
    // 获取二级目录
    async getDirectoryList(subjectID){
      const { data } = await directorysSimple({subjectID});
      // 获取的数据给directoryList
      this.directorysList = data
    },
    // 获取标签列表
    async getTagsList(subjectID) {
      const { data } = await tagsSimple({subjectID})
      // 获取数据给tagsList
      this.tagsList = data  
    },
    // 获取录入人下拉框数据
    async getCreatorList () {
      const { data } = await creatorSimple(this.keyword)
      this.creatorList = data
    },
    // 获取省
    getCityData: function () {
      this.citySelect.province = provinces()
    },
    // 选省获取到市
    handleProvince: function (e) {
      this.citySelect.cityDate = citys(e)
    },
    // 清除按钮
    cleanAll(){
      this.$refs.requestParameters.resetFields()
      this.requestParameters = this.$options.data().requestParameters
      this.directorysList = []
      this.tagsList = []
      this.citySelect.cityDate = []
    },
    // 搜索按钮
    searchQuestion(){
      this.requestParameters.page =1
      this.getList(this.requestParameters)
    },
    // 预览题目
    async checkQuestion(row){
      const { data} = await detail({id:row.id})
      this.formData = data
      this.$refs.questionsCheck.dialogFormV()
    },
    // 添加、编辑按钮
    changeQuestion (id) {
      if(id === 'add'){
        this.$router.push({ path:'/questions/new'})
      }else{
        this.$router.push({ path: '/questions/new',query: {id}})
      }
    },
    // 删除按钮
    removeQuestion(question){
      this.$confirm("此操作将永久删除问题"+"，是否继续？","提示",{
        type:'warning'
      }).then(async()=>{
        await remove({id: question})
        .then(response=>{
          this.$message.success('成功删除了问题' + '!')
          this.dataList.splice(question,1)
          this.getList(this.requestParameters)
        })
        .catch(response => {
          this.$message.error('删除失败!')
        })
      })
      .catch(()=>{
        this.$message.info('已取消操作!')
      })
    },
    // 加入精选
    addChoice(id) {
      this.$confirm('此操作将该题目加入精选'+'，是否继续？','提示',{
        type: 'info'
      }).then(async()=>{
        await choiceAdd({id:id,choiceState:1})
        .then(response=>{
          this.$message.success('成功加入精选题库'+'!')
          this.$router.push({ path:'/questions/choice'})
        })
        .catch(response => {
          this.$message.error('加入失败!')
        })
      })
      .catch(()=>{
        this.$message.info('已取消操作!')
      })
    },
    // 每页显示信息条数
    handleSizeChange (val) {
      this.requestParameters.pagesize = val
      if (this.requestParameters.page === 1) {
        this.getList(this.requestParameters)
      }
    },
    // 进入某一页
    handleCurrentChange (val) {
      this.requestParameters.page = val
      this.getList()
    },
    // 点击空白处 隐藏弹层
    hide(){
      window.onclick= function(){
        // this.closeBtn()
        console.log(11)
      }
    },
  },
 
}
</script>

<style rel="stylesheet/scss" lang="scss">
.add-btn{
  display: block;
  float: right;
  margin-bottom:10px;
}
.questions-table {
  margin-top: 10px;
}
.questions-pagination {
  margin: 20px 0;
  float:right
}
</style>
